<template>
  <section>
    <!-- 面包屑 -->
 <breadcrumbs></breadcrumbs>
    <!-- 查询条件 -->
    <el-form ref="searchForm"
             :model="searchForm"
             label-width="100px"
             inline
             class="demo-form-inline"
             size='small'
             style="border-bottom: 1px solid #f6f6f6;">
      <el-form-item label="用户名称"
                    prop="customerName">
        <el-input v-model="searchForm.customerName"
                  placeholder="请输入用户名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   @click="search">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
    <btns @exec="exec"></btns>
    <div class="data-container scroll-table">
      <div>
        <div class="ind-title lh50 f16">用户列表</div>
      </div>
      <!-- 用户列表 -->
      <el-table :data="tableData"
                border
                style="width: 100%"
                @selection-change="tableSelectionChange">
        <el-table-column type="selection"
                         width="40">
        </el-table-column>
        <el-table-column prop="customerName"
                         label="用户名称">
        </el-table-column>
        <el-table-column prop="roleName"
                         label="用户角色">
        </el-table-column>
        <el-table-column prop="customerStatus"
                         label="状态">
          <template slot-scope="scope">
            <div v-if="scope.row.customerStatus==0"
                     type="danger"
                     :underline="false">禁用</div>
            <div v-if="scope.row.customerStatus==1"
                     :underline="false">启用</div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="mgt-10 pd-0"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="searchForm.current"
                     :page-sizes="[10, 20, 30, 50]"
                     :page-size="searchForm.size"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="searchForm.totalCount">
      </el-pagination>
    </div>
    <!--新增修改界面-->
    <el-dialog :title="funTit=='add'?'新增':'修改'"
               :visible.sync="addORUpdateVisible"
               width="700px"
               :close-on-click-modal="false">
      <el-form :model="userForm"
               label-width="120px"
               :rules="rules"
               ref="userForm">

        <el-form-item label="电话号码"
                      prop="customerPhone">
          <el-input v-model="userForm.customerPhone"
                    auto-complete="off"
                    :disabled="!xinzegn"></el-input>
        </el-form-item>
        <el-form-item label="用户名称"
                      prop="customerName">
          <el-input v-model="userForm.customerName"
                    auto-complete="off"
                    :disabled="!xinzegn"></el-input>
        </el-form-item>
        <el-form-item label="用户密码"
                      prop="password">
          <el-input v-model="userForm.password"
                    auto-complete="off"
                    show-password></el-input>
        </el-form-item>
        <!-- <el-form-item label="身份证号码"
                      prop="idcard">
          <el-input v-model="userForm.idcard"
                    auto-complete="off"></el-input>
        </el-form-item> -->
        <el-form-item label="用户角色"
                      prop="roleId">
          <el-select v-model="userForm.roleId"
                     @change="getrole()"
                     placeholder="请选择用户角色">
            <el-option :label="v.roleName"
                       :value="v.roleId"
                       v-for="(v,i)  in roleData"
                       :key="i"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click.native="addORUpdateVisible = false">取消</el-button>
        <el-button type="primary"
                   @click.native="submit('userForm')">提交</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>

import { validateMobilePhone, validatePass, validateCode } from '../../utils/tool'
import btns from '@/components/btns.vue'
import breadcrumbs from "@/components/breadcrumbs.vue";
export default {
  components: {
    btns,
     breadcrumbs,
  },
  data () {
    return {
      xinzegn:true,
      searchForm: {
        customerName: '',
        totalCount: 0,
        current: 1,
        size: 10,

      },
      isotherAdmin: false,
      addORUpdateVisible: false,
      funTit: '',
      userForm: {
        "customerName": "",
        "password": "",
        "roleId": "",
        "customerPhone": "",
        // "idcard": ""
      },
      rules: {
        "customerName": [
          { required: true, message: '请输入用户名称', trigger: 'blur' }
        ],
        "customerPhone": [
          { required: true, message: '请输入电话号码', trigger: 'blur' },
          { min: 11, max: 11, message: '电话号码必须是11位', trigger: 'blur' }
        ],
        "idcard": [
          { required: true, message: '请输入身份证号码', trigger: 'blur', maxlengh: 18 },
          { min: 18, max: 18, message: '身份证必须是18位', trigger: 'blur' }
        ],
        "password": [
          { required: true, message: '请输入用户密码', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ]
      },
      tableData: [],
      tableSelection: [],
      roleData: []
    }
  },
  created () {
    this.customerlist();
    this.rolelist();
  },
  methods: {
    getrole () {
      let roleId = this.userForm.roleId;
      this.roleData.forEach(item => {
        if (item.roleId == roleId) {
          console.log('item', item);
          this.userForm.roleName = item.roleName;
          this.userForm.roleId = item.roleId;
        }
      })

    },
    handleSizeChange (v) {
      this.searchForm.size = v;
      this.customerlist();
    },
    handleCurrentChange (v) {
      this.searchForm.current = v;
      this.customerlist();
    },
    rolelist () {
      //获取接口
      this.$api.role.list({}).then(d => {
        if (d.code == 200) {
          this.roleData = d.data;
          // console.log(this.roleData, "roleData")
        } else {
          this.$message.error(d.msg);
        }
      }).catch((e) => {
        console.log(e);
      })
    },
    customerlist () {
      //获取接口
      this.$api.admincustomer.customermanagerList(this.searchForm).then(d => {
        if (d.code == 200) {
          let customer = [];
          d.data.forEach(item => {
            if ((item.roleId != null && item.roleName != null) && item.roleName != '微信用户') {
              customer.push(item);
            }
          })
          this.tableData = customer;
          this.searchForm.totalCount = d.totalCount;
        } else {
          this.$message.error(d.msg);
        }
      }).catch((e) => {
        console.log(e);
      })
    },
    handleReset () {
      this.$refs.searchForm.resetFields();
      this.search()
    },
    search () {
      this.customerlist();
    },
    tableSelectionChange (val) {
      this.tableSelection = val;
    },
    exec (fun) {
      if (this[fun]) {
        this.funTit = fun;
        this[fun]()
      } else {
        this.$message.error('方法未定义');
      }
    },
    add () {
      this.userForm = {
        "customerName": "",
        "password": "",
        "roleId": '',
        "customerPhone": "",
        // "idcard": ""
      }
      this.addORUpdateVisible = true;
      this.xinzegn =true;
    },
    update () {
      if (this.tableSelection.length != 1) {
        this.$message.error('请选中一行数据');
        return
      }
      console.log(this.tableSelection[0], this.userForm)
      this.userForm = this.tableSelection[0];
      this.addORUpdateVisible = true;
      this.xinzegn =false;
    },
    del () {
      if (this.tableSelection.length != 1) {
        this.$message.error('请选中一行数据');
        return
      }
      var demo = this.tableSelection[0];
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.admincustomer.customerupdateStatus({ customerId: demo.customerId, status: -1 }).then(d => {
          if (d.code == 200) {
            this.customerlist();
            this.$message.success('删除成功');
          } else {
            this.$message.error(d.msg);
          }
        }).catch((e) => {
          console.log(e);
        })
      });
    },
    enable () {
      if (this.tableSelection.length != 1) {
        this.$message.error('请选中一行数据');
        return
      }
      var demo = this.tableSelection[0];
      if (demo.customerStatus == 1) {
        this.$message.error('该数据已启用');
        return
      }
      this.$confirm('此操作将启用该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.admincustomer.customerupdateStatus({ customerId: demo.customerId, status: 1 }).then(d => {
          if (d.code == 200) {
            this.customerlist();
            this.$message.success('启用成功');
          } else {
            this.$message.error(d.msg);
          }
        }).catch((e) => {
          console.log(e);
        })
      });
    },
    disable () {
      if (this.tableSelection.length != 1) {
        this.$message.error('请选中一行数据');
        return
      }
      var demo = this.tableSelection[0];
      if (demo.customerStatus == 0) {
        this.$message.error('该数据已禁用');
        return
      }
      this.$confirm('此操作将禁用该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.admincustomer.customerupdateStatus({ customerId: demo.customerId, status: 0 }).then(d => {
          if (d.code == 200) {
            this.customerlist();
            this.$message.success('禁用成功');
          } else {
            this.$message.error(d.msg);
          }
        }).catch((e) => {
          console.log(e);
        })
      });
    },
    submit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.funTit == 'add') {
            console.log(this.userForm)
            this.$api.admincustomer.customeradd(this.userForm).then(d => {
              if (d.code == 200) {
                this.addORUpdateVisible = false;
                this.$refs.userForm.resetFields();
                this.$message.success('新增成功');
                this.customerlist();
              } else {
                this.$message.error(d.msg);
              }
            }).catch((e) => {
              console.log(e);
            })
          } else {
            this.$api.admincustomer.customerupdate(this.userForm).then(d => {
              if (d.code == 200) {
                this.addORUpdateVisible = false;
                this.$refs.userForm.resetFields();
                this.$message.success('修改成功');
                this.customerlist();
              } else {
                this.$message.error(d.msg);
              }
            }).catch((e) => {
              console.log(e);
            })
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
}

</script>